// 5、封装函数
function lazyLoad(){

    // 1、每次获取最新的 可见视口+滚动的高度 (分别做可见视口【兼容IE浏览器】和滚动条高度的兼容【兼容doctype】)
var tempOne = window.innerHeight || document.documentElement.clientHeight   //兼容IE浏览器
var tempTwo = document.body.scrollTop || document.documentElement.scrollTop   //兼容doctype,documentElement指的是html

// 2、获取所有图片
var imgObjs = document.querySelectorAll('img')

// 3、遍历
imgObjs.forEach(function(item,i){        //item就是每一个图片标签对象

    // 4、判断---当前图片.offsetTop < 步骤1（可见视口+滚动的高度）
        // 4.1不成立---不管
        // 4.2成立---修改图片的src地址，改成真的，即将src-real的地址赋给src
        if (item.offsetTop <= tempOne + tempTwo){
            item.src = item.getAttribute('src-real')       //切记src-real是非标签默认属性，需要用自定义的语法来获取，即标签对象.getAttribute()
        }
})
}
lazyLoad()   //默认打开网页就得判断修改图片
// 6、绑定网页滚动条窗口事件
window.onscroll = lazyLoad     //切记加上了小括号就表示调用，此时是绑定窗口事件，需要的是函数本身，即lazyLoad
